interface Setting {
  svgId: string | null,
  strokeColor: string,
  strokeWidth: string,
  animationTime: number,
  interval: number,
  fadeOutTime: number,
  lifeTime: number,
  width: number,
  height: number,
  leftRight: boolean,
  easing: string,
  animationTimeRange: number[] | null
}
export default class Ckline {
  viewportwidth!: number;
  viewportHeight!: number;
  $el!: string;
  interval!: NodeJS.Timer;
  settings!: Setting;
  constructor(option: Setting) {
    this.settings = {
      svgId: null,
      strokeColor: '#000',
      strokeWidth: '2',
      animationTime: 1000,
      interval: 600,
      fadeOutTime: 800,
      lifeTime: 2000,
      width: 0,
      height: 0,
      leftRight: true,
      easing: 'swing',
      animationTimeRange: null
    }
    Object.assign(this.settings, option)
    this.init()
  }
  init() {
    this.creatLine(this.settings.width, this.settings.height).then(res => {
      if (res) {
        this.animate()
      }
    }).catch(err => {
      console.error(err);
    })
  }
  creatLine(width: number, height: number) {
    return new Promise((rep, rej) => {
      try {
        var startItemsWidth = new Array(0, width),
          ramdomItemWidth = startItemsWidth[Math.floor(Math.random() * startItemsWidth.length)],
          startItemsHeight = new Array(0, height),
          ramdomItemHeight = startItemsHeight[Math.floor(Math.random() * startItemsHeight.length)];
        var svgns = 'http://www.w3.org/2000/svg';
        var x1 = ramdomItemWidth,
          y1 = Math.random() * height,
          x2,
          y2 = Math.random() * height;
        var randomBool = true;
        if (this.settings.leftRight === false) {
          randomBool = Math.random() >= 0.5;
        }
        if (randomBool == true) {
          x1 = ramdomItemWidth;
          if (ramdomItemWidth === 0) {
            x2 = width;
          } else {
            x2 = 0;
          }
        } else {
          var range1 = Math.floor(Math.random() * width) + 0;
          var range2 = Math.floor(Math.random() * width) + 0;
          x1 = range1;
          x2 = range2;
          y1 = ramdomItemHeight;
          if (ramdomItemHeight === 0) {
            y2 = height;
          } else {
            y2 = 0;
          }
        }
        //var line = document.createElementNS(svgns, 'line');
        var line: any = document.createElementNS(svgns, 'path');
        line.setAttributeNS(null, 'd', 'M ' + x1 + ',' + y1 + ' L ' + x2 + ',' + y2);
        line.setAttributeNS(null, 'stroke-width', this.settings.strokeWidth);
        line.setAttributeNS(null, 'stroke', this.settings.strokeColor);
        line.setAttributeNS(null, 'class', 'ckline off');
        if (this.settings.svgId) {
          console.log(line);

          document.getElementById(this.settings.svgId)!.appendChild(line);
        } else {
          console.log(line);
          document.documentElement.getElementsByTagName('body')[0].append(line);
        }
        var length = line.getTotalLength();
        line.setAttributeNS(null, 'stroke-dasharray', length);
        line.setAttributeNS(null, 'stroke-dashoffset', length);
        rep(true)
      } catch (err) {
        console.error(err);
        rej(err)
      }
    })
  }
  animate() {
    var time = this.settings.animationTime;
    if (this.settings.animationTimeRange) {
      time = Math.floor(
        Math.random() * (this.settings.animationTimeRange[1] - this.settings.animationTimeRange[0] + 1) +
        this.settings.animationTimeRange[0]
      );
      //console.log(time);
    }
    let cklineOffList = document.getElementsByClassName('ckline off')
    let cklineOffListLen = cklineOffList.length
    console.log(this);

    for (let i = 0; i < cklineOffListLen; i++) {
      const cklineOff = cklineOffList[i];
      console.log(cklineOff);

    }
    // document.getElementsByClassName('ckline off').forEach((cklineOff) => {
    //   console.log(cklineOff);

    // jQuery(this).addClass('on').removeClass('off');
    // jQuery(this).animate(
    //   {
    //     'stroke-dashoffset': 0
    //   },
    //   time,
    //   this.settings.easing
    // );
    // var $this = jQuery(this);
    // setTimeout(function () {
    //   $this.fadeOut(this.settings.fadeOutTime, function () {
    //     jQuery(this).remove();
    //   });
    // }, this.settings.lifeTime);
    // });
  }
}